<template>
  <div>
     <div>
      <el-form label-width="80px" size="mini" :model="filterData">
        <el-row :gutter="30">
          <el-col style="width: 300px;">
              <el-form-item label="教室名称">
                <el-input placeholder="教师名称" v-model="filterData.title" clearable></el-input>
              </el-form-item>
          </el-col>
         <el-col :span="12">
           <el-form-item label="所属校区" prop="area">
             <el-select v-model="filterData.area"   placeholder="所属校区" clearable filterable>
               <el-option :label="item.title" :value="item.id" :key="index" v-for="(item,index)  in areas"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
          <el-col style="width: 300px;">
             <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
     </div>
     <div style="margin: 2px 0px;">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleCreate">新增教室</el-button>
        </el-button-group>
     </div>
     <div>
        <el-table border :data="tableData">
          <el-table-column label="序号" type="index" width="60px" align="center"></el-table-column>
          <el-table-column label="启用状态" prop="status" width="100px" align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="background-color: #67C23A;color: #fff;padding: 2px 5px;">启用</span>
               <span v-if="scope.row.status==0" style="background-color: #a3a3a3;color: #fff;padding: 2px 5px;">未启用</span>
            </template>
          </el-table-column>
          <el-table-column label="教室名称" prop="title" width="250px" align="center"></el-table-column>
          <el-table-column label="容纳人数" prop="capacity" align="center" width="80px"></el-table-column>
          <el-table-column label="教室说明" prop="desc"  align="left"></el-table-column>
          <el-table-column label="所属校区" prop="area" align="center" width="240px"></el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template v-slot="scope">
              <el-button-group>
                <el-button icon="el-icon-edit-outline" circle title="编辑" @click="handleEdit(scope.$index,scope.row)"></el-button>
                <el-button icon="el-icon-delete" circle type="danger" title="删除" @click="handleDelete(scope.$index,scope.row)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
     </div>

     <EditUI ref="editUI" v-if="editVisible"></EditUI>
     <CreateUI ref="createUI" v-if="createVisible"></CreateUI>
  </div>
</template>

<script>
  import EditUI from './edit.vue';
  import CreateUI from './create.vue';
  export default{
    components:{
      EditUI,
      CreateUI
    },
    data(){
      return{
         areas:[],
         filterData:{
           title:'',
           area:''
         },
         editVisible:false,
         createVisible:false,
         talbeData:[]
      }
    },
    created(){

      this.loadArea();
    },
    methods:{
      loadArea(){
        this.api_helper.post("api/institution/area/list_option").then(res=>{
            if(res.status==200 && res.data.code==1){
              this.areas=res.data.list;
            }
        })
      },
      handleCreate(){
          this.createVisible=true;
          this.$nextTick(()=>{
            this.$refs.createUI.dialogVisible=true;
            this.$refs.createUI.initData();
          })
      },
      handleEdit(index,data){
        this.editVisible=true;
        this.$nextTick(()=>{
           this.$refs.editUI.dialogVisible=true;
           this.$refs.editUI.initData(index,JSON.parse(JSON.stringify(data)));
        })
      },
      handleDelete(index,data){

      }
    }
  }
</script>

<style>
</style>
